<template>
	<view class="home">
	  <view class="header">
		<view class="bar-wrapper">
		  <view class="title-bar">
			<text class="title">首页</text>
			<image class="icon" src="@/static/images/icon_notice.png" @click="navigateTo('/pages/chats/systemMessages')"></image>
		  </view>
		</view>
		<image class="img" src="@/static/images/home_bg.jpg"></image>
	  </view>
	  <view class="section">
		<template v-if="certified">
			<z-data-select :localdata="selectDataList" @change="handleDataSelectChange($event, selectorBusinessTypeMap.SHOP)">
			  <view class="row">
				<view class="name">{{ baseInfo.currentShopName }}</view>
				<image class="pic" src="@/static/images/icon_shape.png"></image>
			  </view>
			</z-data-select>
		</template>
		<swiper class="swiper" indicator-dots circular autoplay indicator-active-color="#ffffff">
		  <swiper-item v-for="swiper in swipers" :key="swiper">
			<view class="swiper-item">
			  <image class="banner-img" :src="swiper"></image>
			</view>
		  </swiper-item>
		</swiper>
		<view class="card">
		  <view class="news-type">
			<image class="img" src="@/static/images/news_type1.jpg"></image>
		  </view>
		  <view class="content">
			<swiper class="news-swiper" circular :autoplay="true" :interval="3000" :duration="1000" vertical="y">
				<swiper-item v-for="item in newsList" :key="item.informationId">
					<view class="swiper-term">{{ item.title }}</view>
				</swiper-item>
			</swiper>
		  </view>
		</view>
	  </view>
	  <view class="sponge"></view>
	  <view class="main">
		<view class="article" v-if="certified">
		  <view class="group">
			<view class="banner" @click="navigateTo('/pages/home/collectClothes')">
			  <view class="adrift">
				<text>收衣</text>
			  </view>
			  <image class="banner-bg" src="@/static/images/bg_courier.png"></image>
			</view>
			<view class="banner">
			  <view class="adrift">
				<text>送衣</text>
			  </view>
			  <image class="banner-bg" src="@/static/images/bg_box.png"></image>
			</view>
		  </view>
		  <view class="combine">
			<z-data-select :localdata="rankingDataList" @change="handleDataSelectChange($event, selectorBusinessTypeMap.RANKING)">
				<view class="group">
					<view class="context">{{ baseInfo.currentRankWay }}</view>
					<view class="arrow">
						<uni-icons type="right" size="20"></uni-icons>
					</view>
				</view>
			</z-data-select>
			<custom-date-picker v-model="modelVal" :localdata="datePickerList" @time-change="handleTimeChange" @item-click="handleItemClick"></custom-date-picker>
		  </view>
		  <view class="card">
			<view class="card-title">营业额</view>
			<view class="amount">¥{{ baseInfo.turnover }}</view>
			<view class="total">总订单 {{ baseInfo.orderNums }}</view>
			<view class="summaries">
				<view class="summary">
					<view class="obvious">取衣总数</view>
					<view class="intense">{{ baseInfo.takeNums }}</view>
				</view>
				<view class="summary">
					<view class="obvious">收衣总数</view>
					<view class="intense">{{ baseInfo.receivedNums }}</view>
				</view>
				<view class="summary">
					<view class="obvious">分润金额</view>
					<view class="intense">{{ baseInfo.profit }}</view>
				</view>
			</view>
		  </view>
		</view>
		<view class="oops" v-else>
		  <view class="img-wrapper">
			<image class="img" src="@/static/images/home_star.png"></image>
		  </view>
		  <view class="tips">请您登录认证后再刷新页面</view>
		  <view class="prompts">温馨提示：该模块只有认证后的账号才能查看！</view>
		</view>
	  </view>
	</view>
</template>
  
<script setup>
import { ref, reactive } from 'vue'
import { onShow, onLoad } from '@dcloudio/uni-app'
import { getInfo, getBannerList, getNewsList, getShopList, getHomePageInfo } from '@/api/index'
import { picker } from '@/utils/common'
import { navigateTo } from '@/utils/navigator'
import userInfo from '@/common/js/userInfo'
import { shopAuthenticateStatusMap, dateTypeMap } from '@/common/js/maps'

const swipers = ref([])
const newsList = ref([])
const certified = ref(false)
const selectorBusinessTypeMap = {
	// 选择店铺
    SHOP: 1,
	// 选择排名方式
    RANKING: 2
}
const rankingTypeMap = {
	// 累计收益金额排名
	CUMULATIVE_AMOUNT: 1,
	// 全部排名
	FULL: 2
}
const selectDataList = ref([])
const rankingDataList = ref([
	{ value: rankingTypeMap.CUMULATIVE_AMOUNT, text: '累计收益金额排名' },
	{ value: rankingTypeMap.FULL, text: '全部排名' }
])
const modelVal = ref({
	itemVal: dateTypeMap.DAY,
	dateRange: []
})
const datePickerList = ref([
	{ text: '日', value: dateTypeMap.DAY },
	{ text: '月', value: dateTypeMap.MONTH },
	{ text: '年', value: dateTypeMap.YEAR }
])
const baseInfo = reactive({
	currentShopName: '',
	dateType: '',
	startTime: '',
	endTime: '',
	currentRankWay: '',
	rank: '',
	storeIds: '',
	// 营业额
	turnover: 0,
	// 订单数
	orderNums: 0,
	// 取衣单数
	takeNums: 0,
	// 收衣单数
	receivedNums: 0,
	// 分润金额
	profit: 0
})

const handleTimeChange = (event) => {
	const [beginTime, endTime] = event
	baseInfo.startTime = new Date(beginTime).getTime()
	baseInfo.endTime = new Date(endTime).getTime()
	baseInfo.dateType = null
	modelVal.value.itemVal = -1
	loadData()
}

const handleItemClick = (event) => {
	if(event.value !== modelVal.value.itemVal) {
		baseInfo.dateType = event.value
		baseInfo.startTime = ''
		baseInfo.endTime = ''
		modelVal.value.dateRange = []
		loadData()
	}
}

const handleDataSelectChange = ({ text, value }, type) => {
	if(type === selectorBusinessTypeMap.SHOP) {
		baseInfo.currentShopName = text
		baseInfo.storeIds = [value]
    } else if(type === selectorBusinessTypeMap.RANKING) {
		baseInfo.currentRankWay = text
    	baseInfo.rank = value
    }
	loadData()
}

const getCertifyInfo = async () => {
	const { auditState } = await getInfo() // 审核状态 (null: 未审核、1: 待审核、2: 审核通过)
	certified.value = +auditState === shopAuthenticateStatusMap.PASS
}

const loadBannerList = async () => {
	const { code, data } = await getBannerList()
	if(code == 200 && data) {
		swipers.value = data.map(({ picture }) => picture)
	}
}

const loadNewsList = async () => {
	const { code, data } = await getNewsList()
	if(code == 200 && data) {
		newsList.value = data
	}
}

const loadShopList = async () => {
	const { code, data } = await getShopList()
	if(code == 200 && data) {
		selectDataList.value = data.map(({ storeName, storeId }) => ({ text: storeName, value: storeId }))
		selectDataList.value.length && handleDataSelectChange(selectDataList.value[0], selectorBusinessTypeMap.SHOP)
	}
}

const loadData = async () => {
	const params = picker(baseInfo, ['dateType', 'startTime', 'endTime', 'rank', 'storeIds'])
	const { code, data } = await getHomePageInfo(params)
	if(code == 200 && data) {
		Object.keys(data).forEach(key => {
			if(key in baseInfo) {
				baseInfo[key] = data[key]
			}
		})
	}
}

const initData = async () => {
	const { text, value } = rankingDataList.value[0]
	baseInfo.currentRankWay = text
    baseInfo.rank = value
	baseInfo.dateType = dateTypeMap.DAY
	await Promise.all([loadBannerList(), loadNewsList(), loadShopList()])
}

onShow(() => {
	getCertifyInfo()
})

onLoad(() => {
	initData()
})
</script>
  
<style lang="scss">
.home {
	height: 100vh;
	display: flex;
	flex-direction: column;
	background-color: #F6F6F6;
	font-family: PingFang SC, PingFang SC;
	position: relative;
	.header {
		height: 419rpx;
		position: relative;
		.bar-wrapper {
			position: absolute;
			left: 24rpx;
			right: 24rpx;
			top: 107rpx;
			z-index: 1;
		}
		.title-bar {
			position: relative;
			text-align: center;
			.title {
				font-size: 36rpx;
				font-weight: bold;
				color: #333;
			}
			.icon {
				position: absolute;
				top: 0;
				right: 0;
				width: 48rpx;
				height: 48rpx;
			}
		}
		.img {
			width: 100%;
			height: 100%;
		}
	}
	.section {
		padding: 0 24rpx;
		position: absolute;
		left: 0;
		right: 0;
		top: 190rpx;
		::v-deep .data-select {
			.row {
				flex-shrink: 0;
				display: flex;
				align-items: center;
				margin-bottom: 24rpx;
				.name {
					color: #333;
					font-size: 28rpx;
					margin-right: 8rpx;
				}
				.pic {
					width: 18rpx;
					height: 12rpx;
				}
			}
			.board {
				max-width: 400rpx;
			}
		}
		.swiper {
			height: 270rpx;
			.swiper-item {
				height: 100%;
				.banner-img {
					border-radius: 20rpx;
				}
			}
		}
		.card {
			margin-top: 24rpx;
			background-color: #fff;
			box-shadow: 0rpx 1rpx 10rpx 1rpx rgba(200,200,200,0.16);
			padding: 6rpx 24rpx;
			border-radius: 12rpx;
			display: flex;
			align-items: center;
			.news-type {
				width: 48rpx;
				height: 48rpx;
				margin-right: 20rpx;
				.img {
					height: 100%;
				}
			}
			.content {
				padding-left: 20rpx;
				flex: 1;
				border-left: 2rpx solid #BFBFBF;
				color: #222;
				font-size: 24rpx;
				.news-swiper {
					height: 32rpx;
					.swiper-term {
						height: 100%;
					}
				}
			}
		}
	}
	.sponge {
		height: 140rpx;
	}
	.main {
		padding: 0 24rpx;
		flex: 1;
		.article {
			margin-top: 64rpx;
			.group {
				display: flex;
				.banner {
					position: relative;
					width: 341rpx;
					height: 128rpx;
					&:first-child {
						margin-right: 20rpx;
					}
					.adrift {
						position: absolute;
						top: 28rpx;
						left: 36rpx;
						z-index: 1;
						text {
							font-size: 32rpx;
							font-weight: bold;
							color: #fff;
							text-shadow: 0px 0px 10px rgba(72,72,72,0.34);
						}
					}
					.banner-bg {
						height: 100%;
					}
				}
			}
			.combine {
				margin-top: 24rpx;
				display: flex;
				align-items: center;
				.data-select {
					width: 338rpx;
					.group {
						display: flex;
						justify-content: space-between;
						align-items: center;
						border-radius: 8rpx;
						height: 80rpx;
						padding: 0 24rpx;
						background-color: #fff;
						.context {
							flex: 1;
							font-size: 28rpx;
							color: #000;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
						}
						.arrow {
							transform: rotate(90deg);
							.uni-icons {
								font-size: 32rpx !important;
							}
						}
					}
				}
				::v-deep .custom-data-picker {
					margin-left: 24rpx;
					flex: 1;
					.pane {
						padding: 8rpx;
						background-color: #ECECEC;
						border-radius: 16rpx;
						.block {
							margin-right: unset;
							padding: 0 24rpx;
							height: 53rpx;
							border-radius: 12rpx;
							background-color: unset;
							text {
								font-size: 32rpx;
							}
							&.active {
								background-color: #fff;
								text {
									font-weight: bold;
								}
							}
						}
					}
					.date {
						margin-left: 16rpx;
						height: 52rpx;
						.uni-date {
							.calender {
								width: 52rpx;
								height: 52rpx;
							}
						}
					}
				}
			}
			.card {
				margin-top: 20rpx;
				padding: 48rpx 0;
				border-radius: 16rpx;
				background-color: #fff;
				text-align: center;
				.card-title {
					font-size: 32rpx;
					color: #848484;
					line-height: 36rpx;
				}
				.amount {
					font-size: 76rpx;
					font-weight: bold;
					line-height: 83rpx;
					margin: 24rpx 0;
				}
				.total {
					font-size: 26rpx;
					color: #848484;
					line-height: 30rpx;
				}
				.summaries {
					margin-top: 56rpx;
					display: flex;
					justify-content: space-around;
					.summary {
						.obvious {
							font-size: 28rpx;
							color: #666;
						}
						.intense {
							font-weight: bold;
							font-size: 40rpx;
							color: #222;
						}
					}
				}
			}
		}
		.oops {
			margin-top: 144rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			.img-wrapper {
				width: 286rpx;
				height: 286rpx;
				.img {
					height: 100%;
				}
			}
			.tips {
				margin-top: 36rpx;
				font-size: 28rpx;
				color: #222;
			}
			.prompts {
				margin-top: 14rpx;
				font-size: 24rpx;
				color: #666;
			}
		}
	}
}
</style>
  